<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.box{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box">
			
		</div>
		<script>
			var oBox=document.querySelector("#box");
			oBox.onmousedown=function(ev){
				console.log(this)
				var ev=ev||event;
				var disX=ev.clientX-oBox.offsetLeft;
				var disY=ev.clientY-oBox.offsetTop;
				document.onmousemove=function(ev){
					console.log(this)
					var ev= ev||event;
					var x=ev.clientX-disX;
					var y=ev.clientY-disY;
//					console.log(x)
					oBox.style.left=x+"px";
					oBox.style.top=y+"px"
				}
				document.onmouseup=function(){
					document.onmousemove=""
					document.onmouseup=""
				}
			}
		</script>
	</body>
</html>
